<template>
  <!-- 流程版本管理 -->
  <div class="form-single-fragment" style="position: relative;">
    <el-row>
      <el-col v-if="entryXml == null" :span="24">
        <el-table
          ref="flowEntry"
          border
          max-height="480"
          :header-cell-style="{background:'#f4f4f4', color:'#717171' }"
          :data="publishedFlowEntryWidget.dataList"
          size="small"
          height="480"
          header-cell-class-name="table-header-gray"
          @sort-change="publishedFlowEntryWidget.onSortChange"
        >
          <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="publishedFlowEntryWidget.getTableIndex" />
          <el-table-column label="流程名称" prop="processDefinitionName" min-width="150px">
            <template>
              <span>{{ flowEntry.processDefinitionName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="流程分类">
            <template>
              <span>{{ flowEntry.flowCategory.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="流程版本" prop="publishVersion">
            <template slot-scope="scope">
              <el-tag size="small" type="primary" effect="dark">{{ 'V:' + scope.row.publishVersion }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="激活状态" prop="activeStatus">
            <template slot-scope="scope">
              <el-tag size="small" effect="dark" :type="scope.row.activeStatus ? 'success' : 'danger'">
                {{ scope.row.activeStatus ? '激活' : '挂起' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="主版本" prop="mainVersion">
            <template slot-scope="scope">
              <el-tag size="small" effect="dark" :type="scope.row.mainVersion ? 'success' : 'danger'">
                {{ scope.row.mainVersion ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" prop="publishTime" width="150px" />
          <el-table-column label="操作" fixed="right" width="200px">
            <template slot-scope="scope">
              <el-button class="table-btn" :class="scope.row.activeStatus ? 'delete' : 'success'" type="text" size="small" @click.stop="onSetActiveStatus(scope.row)">
                {{ scope.row.activeStatus ? '挂起' : '激活' }}
              </el-button>
              <el-button class="table-btn primary" type="text" size="small" @click="getTaskProcessXml(scope.row)">流程图</el-button>
              <el-button class="table-btn primary" :disabled="scope.row.mainVersion" type="text" size="small" @click.stop="onSetMainVersion(scope.row)">设置为主版本</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col v-show="entryXml != null" :span="24">
        <ProcessViewer :xml="entryXml" style="height: 470px">
          <el-button type="info" size="small" icon="el-icon-circle-close" @click.stop="entryXml = undefined">关闭</el-button>
        </ProcessViewer>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { TableWidget } from '@/utils/widget.js'
import { FlowEntryController, FlowOperationController } from '@/api/flowController.js'
import ProcessViewer from '@/views/workflow/components/ProcessViewer.vue'

export default {
  name: 'FormPublishedFlowEntry',
  components: {
    ProcessViewer
  },
  props: {
    flowEntry: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      entryXml: undefined,
      publishedFlowEntryWidget: new TableWidget(this.loadFlowEntryWidgetData, this.loadFlowEntryVerify, false, false)
    }
  },
  mounted() {
    // 初始化页面数据
    this.refreshFormFlowEntry()
  },
  methods: {
    /**
     * 工作流发布版本数据获取函数，返回Promise
     */
    loadFlowEntryWidgetData(params) {
      if (params == null) params = {}
      params = {
        ...params,
        entryId: this.flowEntry.entryId
      }
      return new Promise((resolve, reject) => {
        FlowEntryController.listFlowEntryPublish(params).then(res => {
          resolve({
            dataList: res.data,
            totalCount: Array.isArray(res.data) ? res.data.length : 0
          })
        }).catch(e => {
          reject(e)
        })
      })
    },
    /**
     * 工作流发布版本数据获取检测函数，返回true正常获取数据，返回false停止获取数据
     */
    loadFlowEntryVerify() {
      return true
    },
    /**
     * 设置主版本
     */
    onSetMainVersion(row) {
      this.$confirm('是否将当前版本设置为主版本？').then(res => {
        const params = {
          entryId: this.flowEntry.entryId,
          newEntryPublishId: row.entryPublishId
        }
        return FlowEntryController.updateMainVersion(params)
      }).then(res => {
        this.refreshFormFlowEntry()
      }).catch(e => {})
    },
    /**
     * 激活 / 挂起
     */
    onSetActiveStatus(row) {
      const params = {
        entryPublishId: row.entryPublishId
      }

      const httpCall = row.activeStatus ? FlowEntryController.suspendFlowEntryPublish(params) : FlowEntryController.activateFlowEntryPublish(this, params)
      httpCall.then(res => {
        this.$message.success(`${row.activeStatus ? '挂起成功！' : '激活成功！'}`)
        this.refreshFormFlowEntry()
      }).catch(e => {})
    },
    refreshFormFlowEntry(reloadData = false) {
      if (reloadData) {
        this.publishedFlowEntryWidget.refreshTable(true, 1)
      } else {
        this.publishedFlowEntryWidget.refreshTable()
      }
    },
    /**
     * 获取流程图xml
     */
    getTaskProcessXml(row) {
      if (row.processDefinitionId == null || row.processDefinitionId === '') {
        this.entryXml = undefined
        return
      }
      const params = {
        processDefinitionId: row.processDefinitionId
      }
      FlowOperationController.viewProcessBpmn(params).then(res => {
        // 当前流程实例xml
        this.entryXml = res.data
      }).catch(e => {})
    }
  }
}
</script>

<style  lang="scss">
  .form-single-fragment {
    display: flex;
    flex-direction: column;
    margin: 10px 10px 0 10px;
    .blueLink {
      color: #409eff;
      font-size: 14px;
      margin-left: 20px;
      cursor: pointer;
    }
    .btnList {
      margin-top:20px;
      display: flex;
      justify-content: right;
      float: right;
      .submitBtn {
        margin-right: 30px;
      }
    }
    .fromFlex {
      height: 36px;
      display: flex;
      align-items: center;
    }
    .base-info {
      display: flex;
      margin-bottom: 20px;
      .basics-info {
        width: 100%;
      }
    }
  }
</style>
